<template>
  <div class="title">
      欢迎使用志愿服务系统
  </div>
  <div class="data-panel">
    <el-row :gutter="24" justify="center">
    <el-col :span="10">
      <el-card>
          <template #header>
            <span style="font-size: 20px;">数据概括</span>
          </template>
          <div class="data-conclude">
              <div class="volunteerInfo">
                  <div class="img" >
                     <img src="/src/assets/img/zhiyuanzhe.png" alt="">
                  </div>
                  <div class="info">
                    <div class="num">{{allData.totalVolunteer}}</div>
                    <div class="tips">已注册志愿者</div>
                  </div>
              </div>
              <div class="volunteerInfo">
                  <div class="img" >
                     <img src="/src/assets/img/times.png" alt="">
                  </div>
                  <div class="info">
                    <div class="num">{{allData.totalActivity}}</div>
                    <div class="tips">已开展活动数</div>
                  </div>
              </div>
          </div>
      </el-card>

    </el-col>
    <el-col :span="14">
      <el-card>
          <div class="bg"></div>
      </el-card>

    </el-col>
  </el-row>
  </div>
</template>

<script setup>
  import { ref, reactive, getCurrentInstance,onMounted, nextTick,shallowRef } from "vue"
  const { proxy } = getCurrentInstance();

  const api={
    getAllData: "/index/getAllData",
    getActivityData: "/index/getActivityData",
  }

  const getOption = (title, xAxisData = [], seriesData = []) => {
  return {
    title: {
      text: title,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "red",
        },
      },
    },
    legend: {
      x: 200,
    },
    grid: {
      left: 50,
      right: 0,
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: "#90979c",
        },
      },
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: "45",
      },
    },
    yAxis: {
      type: "value",
    },
    series: seriesData,
  };
};

const allData = ref(
  {}
);
const loadAllData = async () => {
  let result = await proxy.Request({
    url: api.getAllData,
  });
  if (!result) {
    return;
  }
  allData.value = result.data;
};
loadAllData();


</script>

<style lang="scss" scoped>
  .bg{
     width: 100%;
     height: 400px;
     background-image: url("/src/assets/img/VCG211411654153.jpg");
  }
  .title{
    justify-content: center;
    display: flex;
    font-weight: bolder;
    font-size: 30px;
  }
  .data-conclude{
    display: flex;
    justify-content: space-between;

  }
  .data-panel{
    margin-top: 20px;
    .volunteerInfo{
      display: flex;
      width: 40%;
      background-color: rgb(231, 230, 238);
      border-radius: 20px;
      .img{
        width: 50%;
        display: flex;
        justify-content: center;
      }
      img{
        padding:4px 0 4px 0;
        width: 100px;
        height: 100px;
      }
      .info{
        width: 50%;
        height: 100%;
         .num{
          margin-top: 20px;
          display: flex;
          justify-content: center;
          font-size: 30px;

         }
         .tips{
          display: flex;
          justify-content: center;

         }

      }
    }

  }



</style>
